<html lang="zh">
<head>
    <title>多主题分享按钮演示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/social-share.min.css"/>
    <style type="text/css">
        *{
           padding: 0;
           margin: 0;
        }
        
        section{
           padding: 20px;
        }

        section > div{
            margin: 20px 0;
            padding-left: 100px;
        }

        h5{
            font-weight: 600;
        }

        pre{
            padding: 14px;
            overflow: auto;
            line-height: 1.45;
            border-radius: 3px;
            color: #44619D;
            border: none;
            word-wrap: normal;
            background-color: #f5f5f5;
        }

        code{
            font-size: 100%;
            white-space: pre;
            background: transparent;
        }
        
    </style>
</head>
<body>

<div class="container">
    <section>
        <h5>默认主题</h5>
        <div class="social-share-container1"></div>
        <pre>
            <code>
            new SocialShare('.social-share-container1');
            </code>
        </pre>
    </section>

    <section>
        <h5>方形主题</h5>
        <div class="social-share-container2"></div>
        <pre><code>
            new SocialShare('.social-share-container3', {
                theme: 'square',
            });
            </code></pre>
    </section>

    <section>
        <h5>圆形主题</h5>
        <div class="social-share-container3"></div>
        <pre>
            <code>
            new SocialShare('.social-share-container3', {
                theme: 'circle',
            });
            </code>
        </pre>
    </section>

    <section>
        <h5>方形暗色主题</h5>
        <div class="social-share-container4"></div>
        <pre>
            <code>
            new SocialShare('.social-share-container4', {
                theme: 'dark-square',
            });
            </code>
        </pre>
    </section>

    <section>
        <h5>圆形暗色主题</h5>
        <div class="social-share-container5"></div>
        <pre>
            <code>
            new SocialShare('.social-share-container5', {
                theme: 'dark-circle',
            });
            </code>
        </pre>
    </section>
</div>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="../dist/social-share.min.js"></script>
<script type="text/javascript">
    new SocialShare('.social-share-container1');
    
    new SocialShare('.social-share-container2', {
        theme: 'square'
    });
    
    new SocialShare('.social-share-container3', {
        theme: 'circle',
    });

    new SocialShare('.social-share-container4', {
        theme: 'dark-square',
    });

    new SocialShare('.social-share-container5', {
        theme: 'dark-circle',
    });
</script>
</body>
</html>